import React, { useEffect, useRef } from 'react';
import Router from '@/utils/router';
import { backgroundObj, setSessionItem, loginData } from '@/utils/utils';
import { View, Text } from '@tarojs/components';
import './index.scss'
export default (props) => {
  const { item = {}, renderStyle = 'default', hpFlag = '0' } = props;
  const { messageType } = item

  const Teacher = (props) => {
    const { item = {} } = props
    const { content = {}, profile, username, adminType } = item
    const { text, type = '', dropText } = content
    if (type === 'goods') {
      return <ChatShopCard {...props}></ChatShopCard>
    }
    else {
      return <View className={hpFlag === '1' ? 'chatRoom_hp' : null}>
        <View className={renderStyle !== 'default' ? 'ChatRoom_renderStyle_box ChatRoom_box' : 'ChatRoom_box'}>
          <Text style={backgroundObj(profile)} className='chatRoom_propfile'></Text>
          <Text className='teacherTag_box'>{adminType === 'main' ? '讲师' : '助教'}</Text>
          {username}:{text}
        </View>
        {dropText && <View className='ChatRoom_drop'>{dropText}</View>}
      </View>
    }
  }

  const Student = (props) => {
    const { session, item } = props
    const account = loginData() || {}
    const { unionId, } = account
    const { content = {}, profile, username } = item
    const { text } = content
    if (item.unionId === unionId) {
      return <View className={hpFlag === '1' ? 'chatRoom_hp' : null}><View className={renderStyle !== 'default' ? 'ChatRoom_renderStyle_box ChatRoom_box' : 'ChatRoom_box'}><Text style={backgroundObj(profile)} className='chatRoom_propfile'></Text><Text className='meTag_box'>我</Text> {text}</View></View>
    } else {
      return <View className={hpFlag === '1' ? 'chatRoom_hp' : null}><View className={renderStyle !== 'default' ? 'ChatRoom_renderStyle_box ChatRoom_box' : 'ChatRoom_box'}><Text style={backgroundObj(profile)} className='chatRoom_propfile'></Text><Text className='otherTag_box'>{username}:</Text>{text}</View></View>
    }

  }
  const UserText = (props) => {
    const { item = {} } = props
    const { username } = item
    return <View className={hpFlag === '1' ? 'chatRoom_hp' : null}><View className='ChatRoom_user_Box'><Text className='UserText_tag_box'>{username}</Text>来了</View></View>
  }
  const ChatShopCard = (props) => {
    const { item, formData } = props
    const { content = {} } = item
    const { goodsInfo = {} } = content
    const { cover, price, livePrice, goodsName, commerceGoodsId

    } = goodsInfo
    return <View className={hpFlag === '1' ? 'chatRoom_hp' : null}>
      <View className={hpFlag === '1' ? 'chatRoom_hp' : null}>
      </View><View className='ChatShopCard_box' onClick={(e) => {
        e.stopPropagation()
        setSessionItem({ ...formData })
        Router('shopDetail', { args: { goodsId: commerceGoodsId, ...formData, linkType: 'pay' } })
      }}>
        <View className='ChatShopCard_body'>
          <View className='ChatShopCard_profile' style={{ background: `url(${cover.split(',')[0]}) no-repeat center/cover` }}></View>
          <View className='ChatShopCard_content'>
            <View className='ChatShopCard_content_title'>{goodsName}</View>
            <View className='ChatShopCard_content_time'></View>
            <View className='ChatShopCard_card_price'>
              <View className='ChatShopCard_card_priceLeft'>{livePrice || price || 0}</View>
              <View className='ChatShopCard_card_priceRight'>购买</View>
            </View>
          </View>
        </View>
      </View>
    </View>
  }
  const RenderCard = {
    teacher: <Teacher {...props}></Teacher>,
    student: <Student {...props}></Student>,
    addUser: <UserText  {...props}></UserText>
  }[messageType]
  return RenderCard ? RenderCard : null
};
